<template>
  <view class="main">
    <u-navbar :background="{ backgroundColor: 'rgb(61, 95, 255)' }" title="煤矿列表" back-icon-color="#fff"
      title-color="#fff">
      <u-image slot="right" width="40" height="40" src="/static/image/filter.png" @click="goSearch" class="u-m-r-20" />
    </u-navbar>

    <!-- 区县和煤矿筛选 -->
    <customerSearch isCustomerName="customerName"
      isCustomerId="mineCode" mineUrl="/cjt/common/getCustomerList" countyUrl="/alarm/common/getCountys"
      :getSearchData="searchData" @searchList="searchList"></customerSearch>
      <!-- <u-input v-model="searchData.customerStr" placeholder="请选择煤矿" type="select" @click="cityShow = true"
            :select-open="cityShow" /> -->
    <div class="mine-num">
      煤矿数量
      <span  class="mine-num-val">{{ total}}</span>
    </div>

    <scroll-view :scroll-y="true" class="u-flex-1 of-hide" style="height: 200px;" refresher-enabled="true" :refresher-triggered="triggered"
      :refresher-threshold="50" refresher-background="#F5F5F5" @refresherrefresh="onRefresh"
      @scrolltolower="onScrollToLower">
      <view class="list-item" v-for="(item, index) in list" :key="index" @click="toDeails(item)">
        <div>
          <span class="zcsc" :class="['001','003','005'].includes(item.produceStateNum)?'zcColor':'tcColor'">{{ item.produceState }}</span>
        </div>

        <div class="u-p-20">
          <div>
            <span class="list-name">{{ item.customerName }}</span>
            <span class="list-qu m-l-10">{{ item.countyName }}</span>
          </div>

          <div class="u-m-t-20 flex">
            <span class="tag-box" v-if="item.isDanger==='1'">
               <u-image :src="tuImg"></u-image>
              <span class="tag-item">突</span>
            </span>
            <span class="tag-box" v-if="item.autoigntion==='1'">
                <u-image :src="ranImg"></u-image>
              <span class="tag-item">燃</span>
            </span>
            <span class="tag-box" v-if="item.dustExplosion==='1'">
              <u-image :src="baoImg"></u-image>
              <span class="tag-item">爆</span>
            </span>
            <span class="tag-box" v-if="item.impingingDangerous==='1'">
              <u-image :src="congImg"></u-image>
              <span class="tag-item">冲</span>
            </span>
            <span class="tag-box" v-if="item.waterDamage==='1'">
            <u-image :src="suiImg"></u-image>
              <span class="tag-item">水</span>
            </span>
            <span class="tag-box" v-if="item.heatDamage==='1'">
              <u-image :src="reImg"></u-image>
              <span class="tag-item">热</span>
            </span>
          </div>

          <div class="jhsc-box">
            <div class="gzm-box" :class="item.kt==='1'?'gzm-zc':item.kt==='2'?'gzm-jz':'gzm-cxjz'">
              <div class="jhsc-name">
              </div>

              <div class="gzm-item-bg">
                开拓量可采期{{item.kt==='1'?'接续正常':item.kt==='2'?'接续紧张':'临近接续紧张'}}
              </div>
            </div>

            <div class="gzm-box" :class="item.zb==='1'?'gzm-zc':item.zb==='2'?'gzm-jz':'gzm-cxjz'">
              <div class="jhsc-name">
              </div>

              <div class="gzm-item-bg">
                准备量可采期{{item.zb==='1'?'接续正常':item.zb==='2'?'接续紧张':'临近接续紧张'}}
              </div>
            </div>

            <div class="gzm-box" :class="item.hc==='1'?'gzm-zc':item.hc==='2'?'gzm-jz':'gzm-cxjz'">
              <div class="jhsc-name">
              </div>

              <div class="gzm-item-bg">
                回采量可采期{{item.hc==='1'?'接续正常':item.hc==='2'?'接续紧张':'临近接续紧张'}}
              </div>
            </div>
          </div>
        </div>

      </view>
      <template v-if="!showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
        </view>
      </template>
      <view class="p-t-10 p-b-10" v-else>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
    <!-- <u-picker mode="selector" v-model="cityShow" :range="customerList" range-key="label" @confirm="cityConfirm"></u-picker> -->
  </view>
</template>

<script>
import customerSearch from "@/pages/components/customerSearch.vue"; // 区县和煤矿企业下拉组件
import paging from '@/pages/common/paging.js';
export default {
  mixins: [paging],
  components: { customerSearch },
  data () {
    return {
      tuImg: require('@/static/image/cjt/tu.png'),
      ranImg: require('@/static/image/cjt/ran.png'),
      baoImg: require('@/static/image/cjt/bao.png'),
      congImg: require('@/static/image/cjt/cong.png'),
      suiImg: require('@/static/image/cjt/sui.png'),
      reImg: require('@/static/image/cjt/re.png'),
      emitEvent: 'cjt_mineList',
      total: '',
      searchData: {
        countyNo: "",
        countyStr: "所有区县",
        customerStr: "",
        customerNo: "",
        customerId:'',
        customerName: "",
        customerCode: "",
      },
      // cityShow:false,
      customerList:[],
    };
  },
  onLoad (options) {
    // if (getApp().globalData.userInfo.superviseLevel !== "40") {
    //   this.searchData.countyNo = getApp().globalData.userInfo.countyNo;
    // }
    // 从总数进来
    if(options.produceState){
      // this.searchData.countyNo = options.countyNo
      this.searchData.produceState = options.produceState||''
    }else{
      // 从三量进来
      if(options.slData){
        let data = JSON.parse(options.slData)
        this.searchData.countyNo = data.countyNo
        this.searchData.four = data.four
      }
    }

    this.getData();
    // this.getCustomerList()

    uni.$on(this.emitEvent, res => {
      this.searchData = {
        ...this.searchData,
        ...res,
        pageNumber: 1
      }
      this.getData()
    })
  },
  onUnload () {
    // 清除监听
    uni.$off(this.emitEvent);
  },
  methods: {
    // cityConfirm (index) {
    //   this.searchData.customerStr = this.customerList[index].label
    //   this.searchData.customerId = this.customerList[index].id
    //   this.getData()
    // },
    getCustomerList(){
      // this.$get('/cjt/common/getCustomerList?countyNo='+this.searchData.countyNo).then(res=>{
      this.$get('/cjt/common/getCustomerList').then(res=>{
        this.customerList = res.body
      })
    },
    goSearch () {
      const form = {
        ...this.searchData,
      };
      uni.navigateTo({
        url: `./screen?form=${JSON.stringify(form)}&emitEvent=${this.emitEvent}`,
      });
    },
    toDeails (item) {
      item.countyNo = this.searchData.countyNo
      uni.navigateTo({
        url: `./detail?item=${JSON.stringify(item)}`,
      });
    },
    searchList (e) {
      this.searchData.pageNumber = 1
      this.searchData = Object.assign(this.searchData, e);
      this.getData();
    },
    async getData () {
      this.$set(this.searchData, "customerCode", this.searchData.mineCode);
      console.log('this.searchData',this.searchData);
      delete this.searchData.countyNo
      delete this.searchData.countyStr
      const res = await this.$post("/cjt/app/getCustomerInfoList", this.searchData);
      if (res && res.body.content) {
        this.list = this.searchData.pageNumber === 1 ? res.body.content : this.list.concat(res.body.content);
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
          this.showEmpty = false;
        } else {
          this.showEmpty = true;
        }

        this.total = res.body.total
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2) !important;
  border-radius: 6px !important;
  position: relative;
  margin: 10px;

  .zcsc {
    min-width: 64px;
    border-radius: 0 6px 6px 0;
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    margin-top: 10px;
    display: inline-block;
    text-align: center;
  }
 .zcColor{
  background: rgb(74, 220, 172);
 }
 .tcColor{
   background: #cccccc;
 }
  .list-name {
    font-size: 16px;
    font-weight: 500
  }

  .list-qu {
    color: rgb(102, 102, 102)
  }

  .tag-box {
    background: rgba(255, 67, 0, 0.2);
    display: flex;
    width: 40px;
    margin-right: 10px;
    .tag-item {
      display: block;
      height: 16px;
      width: 100%;
      text-align: center;
      line-height: 16px;
      color: rgb(255, 67, 0);
      font-size: 14px;
    }

    img {
      display: block;
      width: 16px;
      height: 16px;
      margin: 0
    }
  }
}

.text-center {
  text-align: center
}

.mine-num {
  text-align: center;
  height: 66px;
  background: #fff;
  line-height: 60px;
  color: #fff;
  background: url('/static/image/cjt/cjnxzc.png');
  background-size: 100% 100%;
  margin: 10px;
  margin-top: 0;

  .mine-num-val {
    font-size: 30px;
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
}

.jhsc-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding-top: 10px ;

  .jhsc-name {
    padding: 10px;
  }
}
.gzm-zc{
  background: linear-gradient(rgba(10, 207, 151, 0.5),
      rgba(167, 238, 217, 0.5));
}
.gzm-jz{
  background: linear-gradient(rgb(255, 158, 80),
  rgb(254, 177, 51));
}
.gzm-cxjz{
  background: linear-gradient(rgba(255, 191, 60, 0.5),
  rgba(255, 191, 60, 0.5));
}
.gzm-box {

  border-radius: 6px;
  padding-bottom: 3px;

  .gzm-item-bg {
    padding-top: 10px;
    background: #fff;
    margin-left: 3px;
    margin-right: 3px;
    padding-bottom: 10px;
    text-align: center
  }
}

.gzm-box-zt {
  background: linear-gradient(rgba(210, 158, 8, 0.5),
      rgba(239, 220, 166, 0.5))
}

.gzm-box-kg {
  background: linear-gradient(rgb(204, 239, 255),
      rgba(224, 249, 255, 0.85))
}

.gzm-box-jx {
  background: linear-gradient(rgb(255, 158, 80),
      rgb(254, 177, 51))
}

.gzm-box-lj {
  background: linear-gradient(rgba(255, 191, 60, 0.5),
      rgba(255, 191, 60, 0.5))
}
.u-input{
  flex: none;
    background: #fff;
    border-radius: 15px;
    margin: 10px;
}
/deep/ .uni-input-input{
  padding-left:20px;
}
.uni-input-placeholder{
    margin-left: 20px;
  }
 /deep/ .u-input__right-icon{
    margin-right: 15px;
  }
</style>
